<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryForm" :inline="true">
        <!-- StartDate  EndDate -->
        <el-form-item prop="month">
          <el-date-picker
            v-model="queryForm.month"
            type="month"
            format="YYYYMM"
            value-format="YYYYMM"
            placeholder="请选择月份"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="keywords">
          <el-input
            v-model="queryForm.keywords"
            placeholder="身份证\姓名\流水号\项目名\班组\所属企业"
            clearable
            style="width: 250px"
          />
          <el-button type="primary" style="margin-left: 0; border-radius: 0" @click="handleQuery"> 搜索 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-row :gutter="20">
        <el-col :span="24" :offset="0" style="margin-top: 10px">
          <el-table
            ref="tableRef"
            v-loading="loading"
            :data="tableData"
            style="width: 100%"
            :show-overflow-tooltip="{ effect: 'light' }"
          >
            <el-table-column label="序号" type="index" :index="(index: number) => index + 1" min-width="50" />
            <el-table-column label="流水号" prop="code" min-width="120" />
            <el-table-column label="项目名称" prop="projectName" min-width="120" />
            <el-table-column label="所属企业" prop="corpName" min-width="120" />
            <el-table-column label="发放年月" prop="month" min-width="100" />
            <el-table-column label="姓名" prop="personName" min-width="100" />
            <el-table-column label="所属班组" prop="groupName" min-width="100" />
            <el-table-column label="工种" prop="workType" min-width="100" />
            <el-table-column label="证件号码" prop="idCard" min-width="120" />
            <el-table-column label="银行卡号" prop="personBankNo" min-width="120" />
            <el-table-column label="应发金额(元)" prop="amountApplied" min-width="120" />
            <el-table-column label="实发金额(元)" prop="amountPaid" min-width="120" />
            <el-table-column label="发放时间" prop="issueTime" min-width="120" />
            <el-table-column label="工资发放状态" prop="status" min-width="100">
              <template #default="scope">
                <el-tag v-if="scope.row.status === 1">已发</el-tag>
                <el-tag v-if="scope.row.status === 0">未发</el-tag>
                <el-tooltip class="box-item" effect="light" :content="scope.row.statusName" placement="top">
                  <el-tag v-if="scope.row.status === -1">发放失败</el-tag>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" min-width="120" />
          </el-table>
          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryForm.pageNum"
            v-model:limit="queryForm.pageSize"
            @pagination="handleQuery"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { QueryPageSalaryInquiry } from "@/api/wage/index";

const loading = ref(false);
const tableData = ref();

const tableRef = ref();

//查询条件
const queryForm = reactive({
  month: "",
  keywords: "",
  pageNum: 1,
  pageSize: 10,
});
const total = ref(0);
//这是列表数据
const handleQuery = function () {
  loading.value = true;
  QueryPageSalaryInquiry(queryForm)
    .then((res) => {
      if (res.type === 0) {
        if (res.success) {
          tableData.value = res.data.list;
          queryForm.pageNum = res.data.pageNum;
          queryForm.pageSize = res.data.pageSize;
          total.value = res.data.total;
        } else {
        }
      } else {
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  handleQuery();
});
</script>
<style scoped>
:deep(.el-button) {
  margin-left: 5px;
}

:deep(.el-input__wrapper) {
  border-radius: 0;
}
</style>
